Issue number: internal

What is the current behavior?

Component styles for ion-progress-bar are fragmented across multiple files (native and ionic). The md and ios themes rely on the native styles. Developers were restricted to those themes and how those themes structured the logic and styles.

What is the new behavior?

• Unified Style Architecture: Combined theme-specific styling into a single progress-bar.scss file that consumes CSS variables, ensuring a single source of truth for component logic.
• Element-First Token Structure: Refactored the IonProgressBar type and tokens to use an element-first hierarchy ({type}.{element}.{state}, e.g., determinate.progress.default.background). This provides predictability and consistency with the rest of the system.
• Defined TypeScript Interface: Added progress-bar.interfaces.ts with reusable types for the recipe and config.
• Defined Theme Defaults: Added per-theme token defaults in ios, md, and ionic theme files.
• Shape Support: Introduced round and rectangular shape variants with per-theme defaults (round for ios and ionic, rectangular for md).
• Solid State Styling: Introduced dedicated styles for when the progress bar is fully buffered (buffer = 1), including separate rules for the buffer bar and buffer circles.
• Type-Scoped CSS: Split generic buffer bar styles into type-specific selectors (progress-bar-type-determinate / progress-bar-type-indeterminate) to prevent cross-type style bleed.
• Updated CSS Variables: Replaced --background and --progress-background with a structured set of semantic variables (e.g., --ion-progress-bar-determinate-progress-default-background).
• Updated Tests: Added shape snapshot tests.

Does this introduce a breaking change?

• Yes
• No

This PR introduces breaking changes to how IonProgressBar is styled.

Migration Path:

1. Token Updates: Update any custom theme configurations to match the new nested structure.

2. CSS Variable Replacements: --background and --progress-background have been removed. Use the new token structure instead:

   • --background → IonProgressBar.determinate.buffer.bar.default.background (or the indeterminate equivalent)
   • --progress-background → IonProgressBar.determinate.progress.default.background (or the indeterminate equivalent)

If per-component customization is needed, the CSS variables can be used directly (e.g., --ion-progress-bar-determinate-progress-default-background).

3. Host class names: The type classes on the host element have been renamed to include the prop name:

   • .progress-bar-determinate → .progress-bar-type-determinate
   • .progress-bar-indeterminate → .progress-bar-type-indeterminate

4. Theme classes: Remove any instances that target the theme classes: ion-progress-bar.md, ion-progress-bar.ios.

Other information

Previews:
Previews:

• Basic
• Buffer
• Determinate
• Shape